<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>
<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');

    $helper = $this->helper('shoppersettings/image');
    list($defaultImgX, $defaultImgY) = $helper->getDefaultSize();
    list($imgX, $imgY) = $helper->getMainSize();
    if ( $imgX > 800 ) {
        $imgX = 800;
        $imgY = $helper->calculateHeight($imgX);
    }
    list($thumbX, $thumbY) = $helper->getThumbSize();

    $zoomX = 210;
    if ( $imgX < 266 ) {
        $zoomX = $imgX - 56;
    }
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom" style="width:<?php echo $imgX;?>px; height:<?php echo $imgY;?>px;">
    <?php
        $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'"  />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="zoom" style="width:<?php echo $zoomX;?>px;">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
    <div id="track">
        <div id="handle"></div>
    </div>
    <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
//<![CDATA[
    Event.observe(window, 'load', function() {
        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
    });
//]]>
</script>
<?php else: ?>
<p class="product-image" style="width:<?php echo $imgX;?>px; height:<?php echo $imgY;?>px;">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize($imgX, $imgY).'" data-srcX2="'.$this->helper('catalog/image')->init($_product, 'image')->resize($imgX*2, $imgY*2).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" width="'.$imgX.'" height="'.$imgY.'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php endif; ?>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <ul id="shopper_gallery_carousel" class="jcarousel-skin-tango clearfix">
        <?php foreach ($this->getGalleryImages() as $_image): ?>
        <?php //Skip, if no image
        if ($_image->getFile() == NULL)
            continue; ?>
        <li>
            <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($thumbX, $thumbY); ?>" data-srcX2="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($thumbX*2, $thumbY*2); ?>" width="<?php echo $thumbX; ?>" height="<?php echo $thumbY; ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </li>
        <?php endforeach; ?>
    </ul>
    <div class="jcarousel-controls">
        <a href="#" class="jcarousel-prev-horizontal" id="shopper_gallery_prev"></a>
        <a href="#" class="jcarousel-next-horizontal" id="shopper_gallery_next"></a>
    </div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {

        function mycarousel_initCallback(carousel) {
            $('#shopper_gallery_next').bind('click', function() {
                carousel.next();
                return false;
            });
            $('#shopper_gallery_prev').bind('click', function() {
                carousel.prev();
                return false;
            });

            $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-container-horizontal').width(<?php echo ($thumbX+8)*3;?>);
            $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-clip-horizontal').width(<?php echo ($thumbX+8)*3;?>);
            $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-item').width(<?php echo $thumbX;?>);
            $('#shopper_gallery_prev, #shopper_gallery_next').css({marginTop:-<?php echo ($thumbX)/2+17;?>});

        };

        $('#shopper_gallery_carousel').jcarousel({
            scroll: 1,
            initCallback: mycarousel_initCallback,
            buttonNextHTML: null,
            buttonPrevHTML: null
        });
    });
</script>
<?php endif; ?>
